<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/details.css">
    <title>主持人_详情</title>
</head>

<body>
    <!-- 顶部导航布局开始 -->
    <div>
        <div class="nav_login">
            <div class="juzhong">
                <p>Ting域主持人欢迎您！ 客服：18812345678</p>
                <p class="p_login"> <a href="#"> 登录 | 注册</a></p>
            </div>
        </div>
        <div class="nav_logo">
            <div class="juzhong">
                <img src="./img/logo.jpg" alt="">
            </div>
        </div>
        <div class="nav_img">
            <img src="img/zcr_sxlb_02.jpg" alt="">
        </div>
        <div class="nav_label">
            <div class="juzhong">
                <ui>
                    <li> <a href="#">首页</a> </li>
                    <li class='active'> <a href="#">主持人</a> </li>
                    <li> <a href="#">加入我们</a> </li>
                    <li> <a href="#">关于我们</a> </li>
                </ui>
            </div>
        </div>
    </div>
    <!-- 顶部导航布局结束 -->
    <!-- 中间部分开始 -->
    <div class='content'>
        <div class="warp">
            <div class="details_box">
                <!-- 今日推荐开始 -->
                <div class='details_left'>
                    <div class='recommend'>
                        <div class='recommend_left'></div>
                        <div class='recommend_right'>今日推荐</div>
                    </div>
                    <ul class='details_left_info'>
                        <li><a href="#">
                                <img src="img/pic_left_01.png" alt="">
                                <div class='star'>
                                    <img src="img/star01.png" alt="">
                                </div>
                                <p class='anchor_price'>
                                    <span class='anchor_price_left'>张俊</span>
                                    <span class='anchor_price_right'>主持人价格：4000元</span>
                                </p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/pic_left_02.png" alt="">
                                <div class='star'>
                                    <img src="img/star01.png" alt="">
                                </div>
                                <p class='anchor_price'>
                                    <span class='anchor_price_left'>张俊</span>
                                    <span class='anchor_price_right'>主持人价格：4000元</span>
                                </p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/pic_left_03.png" alt="">
                                <div class='star'>
                                    <img src="img/star01.png" alt="">
                                </div>
                                <p class='anchor_price'>
                                    <span class='anchor_price_left'>张俊</span>
                                    <span class='anchor_price_right'>主持人价格：4000元</span>
                                </p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/pic_left_04.png" alt="">
                                <div class='star'>
                                    <img src="img/star01.png" alt="">
                                </div>
                                <p class='anchor_price'>
                                    <span class='anchor_price_left'>张俊</span>
                                    <span class='anchor_price_right'>主持人价格：4000元</span>
                                </p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/pic_left_05.png" alt="">
                                <div class='star'>
                                    <img src="img/star01.png" alt="">
                                </div>
                                <p class='anchor_price'>
                                    <span class='anchor_price_left'>张俊</span>
                                    <span class='anchor_price_right'>主持人价格：4000元</span>
                                </p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/pic_left_06.png" alt="">
                                <div class='star_zhe'>
                                    <img src="img/8zhe.png" alt="">
                                </div>
                                <p class='anchor_price'>
                                    <span class='anchor_price_left'>张俊</span>
                                    <span class='anchor_price_right'>主持人价格：4000元</span>
                                </p>
                            </a></li>

                    </ul>
                </div>
                <!-- 今日推荐结束 -->
                <!-- 主持人介绍开始 -->
                <div class="details_right">
                    <div class='introduce_title'>
                        <div class='title_img_box'>
                            <img src="img/pic_right_01.png" alt="">
                            <div class='title_img'>
                                <img src="img/pic_right_02.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class='details_right_info'>
                        <!-- 介绍 -->
                        <div class='jieshao'>
                            <div class='jieshao_img'>
                                <img src="img/pic_right_03.png" alt="">
                            </div>
                            <div class='jiashao_text'>
                                <div class='jieshao_title'>
                                    <h2>家沫</h2>
                                    <p>服务价格：6000元</p>
                                </div>
                            </div>
                            <div class='jieshao_info'>
                                <p><span>年龄：</span>30</p>
                                <p><span>身高：</span>177cm</p>
                                <p><span>体重：</span>75KG</p>
                                <p><span>备注：</span>五环外+300元，外地+1000元</p>
                            </div>
                            <button>立即下单</button>
                        </div>
                        <!-- 视频样片 -->
                        <div class='video'>
                            <div class="title">
                                <p class="title_left"></p>
                                <p class='title_right'>视频样片</p>
                            </div>
                            <div class='movie'>
                                <div><a href="#">视频1："珍爱一生" 西式婚礼</a></div>
                                <div><a href="#">视频1："珍爱一生" 西式婚礼</a></div>
                                <div><a href="#">视频1："珍爱一生" 西式婚礼</a></div>
                            </div>
                        </div>
                        <!-- 个人介绍 -->
                        <div class='brief'>
                            <div class="title">
                                <p class="title_left"></p>
                                <p class='title_right'>个人简介</p>
                            </div>
                            <div class='brief_info'>
                                <p class='brief_info_top'>
                                    主持人洪明，从业多年，经验丰富，主持风格庄重、浪漫、喜气、幽默，擅长主持西式婚礼、时尚主题婚礼、传统中式婚礼，
                                    公司年会庆典、商演活动、产品发布会，有着丰富的主持经验。
                                </p>
                                <p>
                                    备注: <span>【只承接双休日和法定节假日的主持定单】</span>
                                </p>
                                <div class='brief_img'>
                                    <div class='brief_img_top'>
                                        <div class='brief_left'>
                                            <img src="img/details_01.jpg" alt="">
                                        </div>
                                        <div class='brief_right'>
                                            <div class='brief_right_top'>
                                                <h2>PosterLabs</h2>
                                                <h1>朗艺</h1>
                                                <p><img src="img/details_07.jpg" alt=""><span>洪明</span></p>
                                                <p><img src="img/details_06.jpg" alt=""></p>
                                            </div>
                                            <div class='brief_right_cont'>
                                                <img src="img/details_02.jpg" alt="">
                                            </div>
                                            <div class='brief_right_cont'>
                                                <img src="img/details_03.jpg" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class='brief_img_foot'>
                                        <div class='brief_img_foot_left'>
                                            <img src="img/details_04.jpg" alt="">
                                        </div>
                                        <div class='brief_img_foot_right'>
                                            <img src="img/details_05.jpg" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 主持人介绍结束 -->
            </div>
        </div>
    </div>
    <!-- 中间部分结束 -->
    <!-- 底部开始 -->
    <div class='footer'>
        <div class='footer_warp'>
            <div class='footer_left'>
                <p class='footer_left_top'>联系我们</p>
                <p class='footer_left_content'>公司地址：北京市长安街天安门1号 / 监督电话：18812345678</p>
                <p class='footer_left_bottom'>copyright©2016-2019 版权归Ting域主持人所有 </p>
            </div>
            <div class='footer_right'>
                <div class='QR_left'>
                    <img src="img/QR_04.png" alt="">
                    <div class='QR_left_img'>
                        <img src="img/QR_03.png" alt="">
                    </div>
                    <p>官方服务号</p>
                </div>
                <div class='QR_left'>
                    <img src="img/QR_02.png" alt="">
                    <div class='QR_left_img'>
                        <img src="img/QR_01.png" alt="">
                    </div>
                    <p>官方服务号</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部结束 -->
    <!-- 固定定位导航布局开始 -->
    <div class="QR_right">
        <div class='QR_right_top'>
            <!-- <img src="img/QR_small.png" alt=""> -->
            <img src="img/QR_small.png" alt="">
            <div class='QR_box'>
                <div class='QR_box_content'>
                    <img src="img/QR_right.png" alt="">
                    <p class='QR_box_content_font'>关注官方二维码接受订单通知</p>
                </div>
                <div class='QR_box_triangle'>
                    <img src="img/sanjiao.png" alt="">
                </div>
            </div>
        </div>
        <a href="#">
            <div class='QR_right_bottom'>
                <img src="img/jiantou.png" alt="">
            </div>
        </a>
    </div>
    <!-- 固定定位导航布局结束 -->
</body>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    // 导航点击事件
    $(".nav_label li").click(function () {
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');
    })
</script>
</html>